<template>
  <view class="platform-intro-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">平台介绍</text>
        <view class="home-btn" @click="handleHome">
          <FaIcon name="home" color="#1f2937" :size="36" />
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 平台头图 -->
      <view class="banner-section">
        <image 
          src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=800&h=500&fit=crop&q=90" 
          mode="aspectFill" 
          class="banner-bg"
        ></image>
        <view class="banner-mask"></view>
        <view class="banner-content">
          <view class="banner-icon">
            <FaIcon name="leaf" color="#ffffff" :size="80" />
          </view>
          <text class="banner-title">壹加壹农业服务平台</text>
          <text class="banner-subtitle">智慧农业 · 美好生活</text>
        </view>
      </view>

      <!-- 企业介绍 -->
      <view class="intro-section">
        <view class="intro-card">
          <view class="card-header">
            <view class="header-icon">
              <FaIcon name="building" color="#ffffff" :size="40" />
            </view>
            <view class="header-info">
              <text class="header-title">企业简介</text>
              <text class="header-subtitle">嘉祥县壹加壹农业种植农民专业合作社</text>
            </view>
          </view>
          
          <view class="card-content">
            <text class="intro-text">
              嘉祥县壹加壹农业种植农民专业合作社成立于2020年，是一家专注于现代农业服务的专业合作社。我们致力于为农民提供全方位、一站式的农业服务解决方案，推动农业现代化发展。
            </text>
            
            <view class="stats-grid">
              <view class="stat-item bg-primary">
                <text class="stat-value">500+</text>
                <text class="stat-label">服务农户</text>
              </view>
              <view class="stat-item bg-secondary">
                <text class="stat-value">1000+</text>
                <text class="stat-label">服务次数</text>
              </view>
              <view class="stat-item bg-accent">
                <text class="stat-value">98%</text>
                <text class="stat-label">满意度</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 核心优势 -->
      <view class="advantage-section">
        <view class="section-card">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">核心优势</text>
          </view>
          
          <view class="advantage-list">
            <view 
              v-for="(item, index) in advantages" 
              :key="index"
              :class="['advantage-item', item.bgClass]"
            >
              <view :class="['item-icon', item.iconBgClass]">
                <FaIcon :name="item.icon" color="#ffffff" :size="32" />
              </view>
              <view class="item-content">
                <text class="item-title">{{ item.title }}</text>
                <text class="item-desc">{{ item.desc }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务范围 -->
      <view class="service-section">
        <view class="section-card">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">服务范围</text>
          </view>
          
          <view class="service-grid">
            <view 
              v-for="(item, index) in services" 
              :key="index"
              class="service-item"
            >
              <view :class="['service-icon', item.bgClass]">
                <FaIcon :name="item.icon" color="#ffffff" :size="40" />
              </view>
              <text class="service-title">{{ item.title }}</text>
              <text class="service-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 联系我们 -->
      <view class="contact-section">
        <view class="contact-card">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">联系我们</text>
          </view>
          
          <view class="contact-list">
            <view 
              v-for="(item, index) in contacts" 
              :key="index"
              class="contact-item"
            >
              <view :class="['contact-icon', item.bgClass]">
                <FaIcon :name="item.icon" color="#ffffff" :size="32" />
              </view>
              <view class="contact-info">
                <text class="info-label">{{ item.label }}</text>
                <text class="info-value">{{ item.value }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加入我们 -->
      <view class="join-section">
        <button class="join-btn" @click="handleJoin">
          <FaIcon name="user-plus" color="#ffffff" :size="32" style="margin-right: 16rpx;" />
          <text class="join-text">立即加入壹加壹农业</text>
        </button>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'

// 核心优势
const advantages = ref([
  {
    icon: 'rocket',
    title: '专业服务团队',
    desc: '拥有经验丰富的农业服务团队，提供专业化、标准化服务',
    bgClass: 'bg-primary-light',
    iconBgClass: 'icon-primary'
  },
  {
    icon: 'cog',
    title: '先进设备支持',
    desc: '配备现代化农业机械设备，提升作业效率和质量',
    bgClass: 'bg-secondary-light',
    iconBgClass: 'icon-secondary'
  },
  {
    icon: 'handshake',
    title: '一站式服务',
    desc: '从种植到销售，提供全产业链服务支持',
    bgClass: 'bg-accent-light',
    iconBgClass: 'icon-accent'
  },
  {
    icon: 'shield',
    title: '品质保障',
    desc: '严格的质量管理体系，确保服务质量和效果',
    bgClass: 'bg-primary-light',
    iconBgClass: 'icon-primary'
  }
])

// 服务范围
const services = ref([
  { icon: 'tractor', title: '农机服务', desc: '耕地、播种、收割等农机作业服务', bgClass: 'service-icon-primary' },
  { icon: 'dollar', title: '金融支持', desc: '低息贷款、融资租赁等金融服务', bgClass: 'service-icon-secondary' },
  { icon: 'truck', title: '物流配送', desc: '农产品运输、冷链物流服务', bgClass: 'service-icon-accent' },
  { icon: 'users', title: '劳务派遣', desc: '专业农业劳务人员派遣服务', bgClass: 'service-icon-primary' },
  { icon: 'shopping-cart', title: '农产代销', desc: '帮助农户销售优质农产品', bgClass: 'service-icon-primary' },
  { icon: 'building', title: '办公场地', desc: '现代化办公场所租赁服务', bgClass: 'service-icon-secondary' }
])

// 联系方式
const contacts = ref([
  { icon: 'building', label: '企业名称', value: '嘉祥县壹加壹农业种植农民专业合作社', bgClass: 'contact-icon-primary' },
  { icon: 'map-marker', label: '地址', value: '山东省济宁市嘉祥县', bgClass: 'contact-icon-secondary' },
  { icon: 'phone', label: '联系电话', value: '400-123-4567', bgClass: 'contact-icon-accent' },
  { icon: 'clock-o', label: '服务时间', value: '周一至周日 8:00-18:00', bgClass: 'contact-icon-primary' }
])

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleHome = () => {
  uni.reLaunch({ url: '/pages/yjyny/home/index' })
}

const handleJoin = () => {
  uni.navigateTo({ url: '/pages/login' })
}
</script>

<style lang="scss" scoped>
.platform-intro-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  gap: 24rpx;
}

.back-btn,
.home-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active,
.home-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx);
}

// 平台头图
.banner-section {
  position: relative;
  height: 448rpx;
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.banner-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #10b981, #059669, #06b6d4);
}

.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48rpx;
}

.banner-icon {
  width: 160rpx;
  height: 160rpx;
  border-radius: 48rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12rpx);
  border: 4rpx solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.banner-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.banner-subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
}

// 企业介绍
.intro-section {
  padding: 64rpx 32rpx 32rpx;
}

.intro-card {
  background-color: #ffffff;
  border-radius: 48rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  border: 2rpx solid #f3f4f6;
  padding: 48rpx;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding-bottom: 32rpx;
  margin-bottom: 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.header-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 32rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.header-subtitle {
  font-size: 22rpx;
  color: #6b7280;
  margin-top: 8rpx;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.8;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
  padding: 32rpx 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  border-radius: 24rpx;
  
  &.bg-primary {
    background-color: rgba(16, 185, 129, 0.1);
    
    .stat-value {
      color: #10b981;
    }
  }
  
  &.bg-secondary {
    background-color: rgba(6, 182, 212, 0.1);
    
    .stat-value {
      color: #06b6d4;
    }
  }
  
  &.bg-accent {
    background-color: rgba(245, 158, 11, 0.1);
    
    .stat-value {
      color: #f59e0b;
    }
  }
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #6b7280;
}

// 核心优势
.advantage-section,
.service-section {
  padding: 0 32rpx 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 48rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  padding: 48rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.title-bar {
  width: 8rpx;
  height: 40rpx;
  background-color: #10b981;
  border-radius: 4rpx;
  margin-right: 24rpx;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
}

.advantage-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.advantage-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  
  &.bg-primary-light {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent);
  }
  
  &.bg-secondary-light {
    background: linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent);
  }
  
  &.bg-accent-light {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.1), transparent);
  }
}

.item-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.icon-primary {
    background: linear-gradient(135deg, #10b981, #059669);
  }
  
  &.icon-secondary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
  }
  
  &.icon-accent {
    background: linear-gradient(to bottom right, #f59e0b, #d97706);
  }
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.item-desc {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.5;
}

// 服务范围
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.service-item {
  padding: 32rpx;
  border-radius: 24rpx;
  background-color: #f9fafb;
  border: 2rpx solid #f3f4f6;
  display: flex;
  flex-direction: column;
}

.service-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  
  &.service-icon-primary {
    background: linear-gradient(135deg, #10b981, #059669);
  }
  
  &.service-icon-secondary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
  }
  
  &.service-icon-accent {
    background: linear-gradient(to bottom right, #f59e0b, #d97706);
  }
}

.service-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.service-desc {
  font-size: 22rpx;
  color: #6b7280;
  line-height: 1.5;
}

// 联系我们
.contact-section {
  padding: 0 32rpx 32rpx;
}

.contact-card {
  padding: 48rpx;
  border-radius: 48rpx;
  background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1), rgba(245, 158, 11, 0.1));
  border: 2rpx solid rgba(16, 185, 129, 0.2);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12rpx);
  border-radius: 24rpx;
}

.contact-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.contact-icon-primary {
    background: linear-gradient(135deg, #10b981, #059669);
  }
  
  &.contact-icon-secondary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
  }
  
  &.contact-icon-accent {
    background: linear-gradient(to bottom right, #f59e0b, #d97706);
  }
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 22rpx;
  color: #6b7280;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
}

// 加入我们
.join-section {
  padding: 0 32rpx 32rpx;
}

.join-btn {
  width: 100%;
  padding: 32rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.join-btn:active {
  opacity: 0.8;
}

.join-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
